VOS - rendering
Home

VOS - rendering

VOS - rendering

Renderen is het proces waarbij een sjabloon wordt gevuld met gegevens uit de datastorage van je toepassing, ter vervanging van tijdelijke aanduidingen en eenvoudige logica (zoals if-else-instructies of lussen), wat resulteert in een geldig HTML-bestand.

Dynamische partiële views

In de VOS applicatie zijn er twee views die dynamisch gecreëerd moeten worden. D.w.z. de HTML wordt op basis van gegevens (data-driven) door JavaScript aan de DOM toegevoegd. Deze partiële views zijn:

  1. identity
  2. procedure

Identity

De gegevens van de gebruiker, zijn identiteit, worden opgehaald uit het indentity.json bestand en met behulp van JavaScript in de HTML geïnjecteerd of aan de DOM toegevoegd. Die indentity gegevens worden al in het model geladen (zie VOS - Model initialiseren).

De rendering code plaatsen we in een namespace met de naam render. In het vos.js bestand voegen we die namespace toe:

var render = {
    'identity': function (querySelector) {
        var elem = document.querySelector(querySelector);
        elem.innerHTML = '';
        elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2'))
        elem.appendChild(makeTextElement(vos.model.identity.function, 'h3'));
        elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4'));
        elem.appendChild(makeTextElement(vos.model.myLocation.name));
        elem.appendChild(makeTextElement(vos.model.myLocation.street));
        elem.appendChild(makeTextElement(vos.model.myLocation.phone));
        if (vos.model.identity.loggedIn) {
            elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role));
            var buttonElement = makeButton('Afmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/logout');
            elem.appendChild(buttonElement);

        }
        else {
            elem.appendChild(makeTextElement('aangemeld als gast'));
            var buttonElement = makeButton('Aanmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/loggingIn');
            elem.appendChild(buttonElement);
        }
        return elem;
    }
}

De gegevens staan in vos.model.identity. We maken een tekstelement voor de

Indien de gebruiker is aangemeld creëern we een afmelden knop, anders een aanmelden knop.

En voegen die nieuw gecreëerde elementen toe aan het container HTML element met de id die als argument aan die functie wordt meegegeven. Deze methode retourneert bovendien het HTML container element.

procedure

Voor het renderen van de procedure maken we de volgende methoden

Onder de identity methode plaatsen we de procedure methode:

var render = {
    'identity': function (querySelector) {
        var elem = document.querySelector(querySelector);
        elem.innerHTML = '';
        elem.appendChild(makeTextElement(vos.model.identity.firstName + ' ' + vos.model.identity.lastName, 'h2'))
        elem.appendChild(makeTextElement(vos.model.identity.function, 'h3'));
        elem.appendChild(makeTextElement(vos.model.identity.mobile, 'h4'));
        elem.appendChild(makeTextElement(vos.model.myLocation.name));
        elem.appendChild(makeTextElement(vos.model.myLocation.street));
        elem.appendChild(makeTextElement(vos.model.myLocation.phone));
        if (vos.model.identity.loggedIn) {
            elem.appendChild(makeTextElement('aangemeld als ' + vos.model.identity.role));
            var buttonElement = makeButton('Afmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/logout');
            elem.appendChild(buttonElement);

        }
        else {
            elem.appendChild(makeTextElement('aangemeld als gast'));
            var buttonElement = makeButton('Aanmelden');
            buttonElement.setAttribute('name', 'uc');
            buttonElement.setAttribute('value', 'home/loggingIn');
            elem.appendChild(buttonElement);
        }
        return elem;
    },
    'procedure': {
        'make': function (procedureCode) {
            var procedure = vos.model.procedureList.procedure.find(function (item) {
                return item.code === procedureCode;
            });
            elem = render.identity('#view-procedure .show-room');
            var step = document.createElement('DIV');
            step.setAttribute('class', 'step');
            step.appendChild(makeHtmlTextElement(procedure.heading, 'h2'));
            var listElement = document.createElement('OL');
            listElement.setAttribute('class', 'index');
            procedure.step.forEach(function (item, index) {
                var step = makeHtmlTextElement(item.title, 'li');
                if ("action" in item) {
                    var commandPanelElem = makeCommandPanel();
                    item.action.forEach(function (item) {
                        commandPanelElem.appendChild(render.procedure[item.code](item, procedure.title));
                    });
                    step.appendChild(commandPanelElem);
                }
                if ("list" in item) {
                    step.appendChild(render.procedure['LIST'](item.list));
                }
                listElement.appendChild(step);
            });
            step.appendChild(listElement);
            elem.appendChild(step);
        },
        'TEL': function (item, message) {
            // Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
            var phoneNumber = getPhoneNumber(item.phoneNumber);
            if (vos.model.identity.loggedIn) {
                var buttonElement = makeTileButton('Tel', 'icon-phone');
                buttonElement.addEventListener('click', function () {
                    phoneCall(phoneNumber);
                });
                return buttonElement;
            } else {
                return makeTextElement(item.code + ' ' + phoneNumber, 'P');
            }
        },
        'SMS': function (item, message) {
            // Het telefoonnummer van directie, secretariaat, ... is afhankelijk van de plaats
            var phoneNumber = getPhoneNumber(item.phoneNumber);
            if (vos.model.identity.loggedIn) {
                var buttonElement = makeTileButton('Tel', 'icon-send');
                buttonElement.addEventListener('click', function () {
                    vos.smsPrepare(phoneNumber, message);
                });
                return buttonElement;
            } else {
                return makeTextElement(item.code + ' ' + phoneNumber, 'P');
            }
        },
        'LIST': function (list) {
            var listElement = document.createElement('OL');
            listElement.setAttribute('class', 'index');
            list.forEach(function (item) {
                listElement.appendChild(makeHtmlTextElement(item.title, 'li'))
            });
            return listElement;
        }
    }
};

In de controller wordt de rendering methode opgeroepen:

var controller = {
    'home': {
        'index': function () {
            vos.getPosition();
            vos.setMyLocation();
            render.identity('#home .identity');
            view['home']['index']();
        },
        'gas-leak': function () {
            render.procedure.make('GL');
            view['procedure']('gaslek');
        },

JI
2017-12-16 18:16:45